<style >
.adminedit .ivu-form-item .ivu-form-item-error-tip{display: inline-block;}    
.adminedit .ivu-select-dropdown{margin-top:32px;}
</style>
<template>
<div >
     <Modal v-model="modal" :title="title" :styles="{width:'800px',top:'20px'}" class="adminedit">
        
        <Form ref='form1' :model="obj" label-position="right" :rules="ruleValidate" 
        :label-width="100" class="form_error_right">
            <FormItem label="收件人邮箱" prop="toEmail">
                <!-- <Input  v-model="obj.toEmail" style="width:200px;"></Input> -->
                <!-- <Select v-model="obj.toEmail" style="width:200px">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select> -->
                 <AutoComplete
                    v-model="obj.toEmail"
                    @on-search="handleSearch2"
                    
                    style="width:200px">
                    <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
                </AutoComplete>
            </FormItem>

         </Form>
        <div id="div1">
            <div style="width:768px;margin:0px auto;display:block;" class="divuc"  v-if="modal" >
                <h1 
                style="text-align:center;font-size:24px;color:#e12121;border-bottom:2px #e12121 solid;line-height:50px;padding-bottom:10px;margin-bottom:20px;">
                    {{data.outputinvoice.sellerName}}两票自证证明
                </h1>
                <div style="width:708px;margin:0px auto;display:block;">
                    <p  style="margin-top: 8px;border-bottom: 1px #ccc dashed;height: 28px;font-size:12px;color:#495060;">邮件详情：</p>

                    <p style="margin-left: 0px;margin-top: 8px;margin-bottom: 4px;font-size:15px;color:#495060;">
                    1、销售发票信息：</p>
                    <div style="margin-left:10px;margin-top:5px;">
                        <p style="width: 300px;font-size:12px;color:#495060;display: inline-block;">开票方：{{data.outputinvoice.sellerName}}</p>
                        <p style="width: 150px;font-size:12px;color:#495060;display: inline-block;">发票号：{{data.outputinvoice.invoiceNo}}</p>
                        <p style="width: 150px;font-size:12px;color:#495060;display: inline-block;">发票金额：{{data.outputinvoice.invoiceTotalPriceTax}}元</p>
                    </div>
                    <div style="margin-left:30px;margin-top:5px;" >
                            <table v-if="data.outputinvoice.ciOutputInvoiceDetails && data.outputinvoice.ciOutputInvoiceDetails.length<6"
                             style="width:100%;border-collapse: collapse;border-spacing: 0;">
                                <thead>
                                    <tr>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品名称</th>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品编码</th>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品数量</th>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品规格</th>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品单位</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(is,index) in data.outputinvoice.ciOutputInvoiceDetails">
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                            {{is.goodsName}}
                                        </td>
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                        {{is.goodsCode}}</td>
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                            {{is.goodsQuantity}}
                                        </td>
                                        <td  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                            {{is.goodsSpecification}}
                                        </td>
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                        {{is.goodsUnit}}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <p v-else>发票详情请查看发票明细清单</p>
                    </div>   
                    

                    <div style="padding-top: 4px;border-bottom: 1px #ccc dashed;padding-bottom: 4px;"></div>

                    <p style="margin-left: 0px;margin-top: 8px;font-size:15px;color:#495060;margin-bottom: 4px;">
                        2、销售发票校验结果：</p>
                    <div style="margin-left:10px;margin-top:5px;">
                        <p style="width: 250px;font-size:12px;color:#495060;display: inline-block;">
                          {{data.outputinvoice.invoiceNo}} 

                          <span style="color: #17c455;font-size:12px;padding-left:10px;" 
                          :style="data.outputinvoice.checkFlag |decode('flag_color_2')">
                          {{data.outputinvoice.checkFlag |decode('flag')}}</span></p>
                        
                    </div>
                    <div style="padding-top: 4px;border-bottom: 1px #ccc dashed;padding-bottom: 4px;"></div>

                    <p style="margin-left: 0px;margin-top: 8px;font-size:15px;color:#495060;margin-bottom: 4px;">
                    3、采购发票信息:</p>
                    <div style="margin-left:10px;margin-top:5px;" v-for="item in data.incomeinvoice">
                        <p style="color: #495060;font-size:12px;display: inline-block;margin-right: 20px;">
                        销售方：{{item.sellerName}}</p>
                        <p style="color: #495060;font-size:12px;display: inline-block;margin-right: 20px;">
                        发票号：{{item.invoiceNo}}</p>
                        <p style="color: #495060;font-size:12px;display: inline-block;margin-right: 20px;">
                        采购数量：{{item.totalGoodsAmount}}</p>
                        <!-- <p style="color: #495060;font-size:12px;display: inline-block;margin-right: 20px;">
                        剩余数量：<span style="color: #c42d17;">{{item.leftAmount}}</span></p> -->
                    </div>
                    <div style="padding-top: 4px;border-bottom: 1px #ccc dashed;padding-bottom: 4px;"></div>

                    <p style="margin-left: 0px;margin-top: 8px;font-size:15px;color:#495060;margin-bottom: 4px;">
                        4、采购发票校验结果:</p>
                    <div style="margin-left:10px;margin-top:5px;">
                        <p style="width: 250px;margin:0px;font-size:12px;color:#495060;display: inline-block;" v-for="item in data.incomeinvoice" >
                          {{item.invoiceNo}} 
                          <span style="color: #17c455;font-size:12px;padding-left:10px;"
                          :style="item.checkFlag |decode('flag_color_2')">
                          {{item.checkFlag | decode('flag')}}</span></p>
                    </div>

                    <div style="padding-top: 4px;border-bottom: 1px #ccc dashed;padding-bottom: 4px;"></div>

                    <p style="margin-left: 0px;margin-top: 8px;font-size:15px;color:#495060;margin-bottom: 4px;">
                    5、两票验证信息:</p>
                    <div v-for="iu in data.usedRecord">
                         <p style="margin-left:20px;font-size:12px;color:#495060;">
                            采购发票号：{{iu.invoiceNo}}
                            <!-- <span style="float:right;color: #17c455;padding-right:30px;" >发票信息是否与原厂注册信息一致</span> -->
                        </p>
                        <div style="margin-left:30px;margin-top:5px;">
                            <table  style="width:100%;border-collapse: collapse;border-spacing: 0;">
                                <tbody>
                                    <tr v-for="(is,index) in iu.usedRecord">
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">{{index}}</td>
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                        开票方：{{is.buyer_name}}</td>
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                        <span :style="{'color': data.outputinvoice.invoiceNo===is.output_invoiceno?'#17c455':'#000000'} " >发票号：{{is.output_invoiceno}}</span>
                                        </td>
                                         <!-- <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                        商品名称：{{is.goods_name}}</td> -->
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                        使用数量：{{is.use_amount}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>   
                    </div>
                </div>
                <div v-if="data.outputinvoice.ciOutputInvoiceDetails && data.outputinvoice.ciOutputInvoiceDetails.length>5">
                    <h1 
                    style="text-align:center;font-size:24px;color:#e12121;border-bottom:2px #e12121 solid;line-height:50px;padding-bottom:10px;margin-bottom:20px;">
                        发票明细清单
                    </h1>
                    <div style="margin-left:30px;margin-top:5px;" >
                            <table 
                             style="width:100%;border-collapse: collapse;border-spacing: 0;">
                                <thead>
                                    <tr>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品名称</th>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品编码</th>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品数量</th>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品规格</th>
                                        <th  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">商品单位</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(is,index) in data.outputinvoice.ciOutputInvoiceDetails">
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                            {{is.goodsName}}
                                        </td>
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                        {{is.goodsCode}}</td>
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                            {{is.goodsQuantity}}
                                        </td>
                                        <td  style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                            {{is.goodsSpecification}}
                                        </td>
                                        <td style="border: 1px solid #e9e9e9;padding: 8px 16px;text-align: left;font-size:12px;color:#495060;">
                                        {{is.goodsUnit}}</td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>  
                </div>
                

            </div>
        </div>
         <div slot="footer">
             <Button @click="cancel()">关闭</Button>
             <Button type="primary" @click="submit('addForm')" ref="sub">确认发送</Button>
         </div>
     </Modal>
</div>
</template>
<script>
 export default {
     data (){
        
         return {
             modal:false,title:'',
             obj:{toEmail:'',html:''},
             cityList:[
                {value:'fdsafda@qq.com',label:'fdsafda@qq.com'}
             ],
             data:{},
             ruleValidate:{
                 toEmail:[
                     { required: true, message: 'email不能为空', trigger: 'blur' },
                     {type:'email',message:'email 格式不正确',trigger:'blur'}
                 ]
             },data2:[]
         }
     },methods:{
        handleSearch2(value){
            this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
                    value + '@qq.com',
                    value + '@sina.com',
                    value + '@163.com'
            ];
        },
         showdata(params){
            console.log(params)
            this.guid=params.guid;
            this.obj.downLoadUrl=params.download_url;
            this.obj.toEmail='';
            this.$refs.form1.resetFields();
            this.axios.post('/invoice/email/detail/'+this.guid,
                {}).then((res)=>{
                console.log(res);
                this.data=res.data;
                this.modal=true;
            }) 
         },
         submit(){
             if(this.handleSubmit()){
                 var url='/invoice/email/send';
                 $('.divuc').css({'padding-right':'30px'})
                 this.obj.html=$('#div1').html();
                 $('.divuc').css({'padding-right':'0px'});
                // console.log(this.$refs.sub);
                 //$(this.$refs.sub).text('正在发送')
                 //console.log(this.obj.html)
                 this.axios.post(url,this.obj).then((res)=>{
                     if(res.errorCode==0){
                        this.modal=false;   
                         this.obj={};
                         this.$Message.success('成功');
                         this.$emit('refresh');
                     }
                 })   
                 //成功
                 
             }
         },
         cancel(){
             this.modal=false;
         },handleSubmit () {
             var a=true;
             this.$refs['form1'].validate((valid) => {
                 if (valid) {
                     //this.$Message.success('Success!');
                 } else {
                     //this.$Message.error('Fail!');
                     a=false;
                 }
             })
             return a;
         },
     },created(){
         this.$bus.on('bus_adminedit', this.showdata);
         
     },beforeDestroy(){
         this.$bus.off('bus_adminedit',this.showdata)
     }
 }
</script>
